<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="utf-8">
	<title>table</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}

		table {
			margin-top: 10px;
			border-collapse: collapse
		}

		thead td {
			font-weight: 700;
		}

		td {
			border: 1px solid green;
			width: 120px;
			text-align: center;
		}
	</style>
</head>

<body>
	<div id="app">
		<table>
			<thead>
				<td @click="Mysort('idsort')"><span v-model="idsort">学号</span>{{idsort}}</td>
				<td>姓名</td>
				<td>性别</td>
				<td>籍贯</td>
				<td>联系方式</td>
				<td @click="Mysort('agesort')"><span v-model="agesort">年龄</span>{{agesort}}</td>
			</thead>
			<tbody>
				<tr v-for="(item,index) in info" :key="item.age">
					<td>{{item.id}}</td>
					<td>{{item.name}}</td>
					<td>{{item.gender}}</td>
					<td>{{item.place}}</td>
					<td>{{item.phone}}</td>
					<td>{{item.age}}</td>
				</tr>
			</tbody>
		</table>
		<div class="add">
			姓名<input type="text" v-model="name">
			<br />性别<input type="radio" name="gender" value="男" v-model="gender">男 <input type="radio" name="gender" value="女"
				v-model="gender">女
			<br />籍贯<input type="text" v-model="place">
			<br />电话<input type="text" v-model="phone">
			<br />年龄<input type="text" v-model="age">
			<br /><button @click="Myadd">添加一个</button>
		</div>
	</div>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
	<script>
		let app = new Vue({
			el: "#app",
			data: {
				idsort: "↑",
				agesort: "",
				name: "",
				gender: "",
				place: "",
				phone: "",
				age: "",
				info: [{ "id": "1", "name": "一号", "gender": "男", "place": "北京", "phone": "114514233", "age": "24" },
				{ "id": "2", "name": "二号", "gender": "女", "place": "上海", "phone": "114514233", "age": "26" },
				{ "id": "3", "name": "三号", "gender": "男", "place": "广州", "phone": "114514233", "age": "23" },
				{ "id": "4", "name": "这是名字", "gender": "女", "place": "脚盆", "phone": "114514233", "age": "27" },
				{ "id": "5", "name": "老大哥", "gender": "男", "place": "苏维埃", "phone": "19911225", "age": "69" }]
			},
			// computed:{
			// 	Mysort:function(){
			// 		return this.info.sort(function(a,b){
			// 			return a.age - b.age
			// 		})
			// 	}
			// },
			methods: {
				Myadd: function () {
					console.log(typeof this.info.length)
					this.info.push({ id: this.info.length + 1, name: this.name, gender: this.gender, place: this.place, phone: this.phone, age: this.age })
				},
				Mysort: function (my) {
					if (my === "agesort") {
						if (this.agesort == "") {
							this.agesort="↑";
							this.info = this.info.sort(function (a, b) {
								return a.age - b.age
							})
							this.idsort="";
						} else if (this.agesort == "↑") {
							this.info = this.info.sort(function (a, b) {
								return b.age - a.age
							})
							this.agesort="↓"
						} else if (this.agesort == "↓") {
							this.info = this.info.sort(function (a, b) {
								return a.age - b.age
							})
							this.agesort="↑";
						}
					} else if (my === "idsort") {
						if (this.idsort == "") {
							this.idsort="↑";
							this.info = this.info.sort(function (a, b) {
								return a.id - b.id
							})
							this.agesort="";
						} else if (this.idsort == "↑") {
							this.info = this.info.sort(function (a, b) {
								return b.id - a.id
							})
							this.idsort = "↓";
						} else if (this.idsort == "↓") {
							this.info = this.info.sort(function (a, b) {
								return a.id - b.id
							})
							this.idsort="↑"
						}
					}
				}
			}
		})
	</script>
</body>

</html>